<template>
  <el-dialog @open="openDialog" :title="isAdd?'新增':'编辑'" :visible="dialogFormVisible" @close="closeDialog">
    <el-form :model="form" label-width="80px" >
      <el-form-item label="用户">
        <el-select v-model="form.userIds" filterable  multiple  placeholder="请选择">
          <el-option
            v-for="user in users"
            :key="user.id"
            :label="user.name"
            :value="user.id"
          >
            <span style="float: left">{{ user.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ user.passport }}</span>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品" >
        <el-select @change="changeGoods" v-model="form.goodsId" filterable  placeholder="请选择">
          <el-option
            v-for="item in goods"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
            <span style="float: left">{{ item.title }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">积分:{{item.point}} | 数量:{{ item.num }}</span>
          </el-option>
        </el-select>
      </el-form-item>

      <div style="display:flex;justify-content: center" v-if="selectGoods.id>0">
        <img v-for="(item,index) in selectGoods.thumbs" style="width: 150px;height: 200px" :src="item">
      </div>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

import { myGet, myPost } from '@/utils/myUtils'

const urlAdd = '/guard/order/add'
const urlUserLst = '/guard/user/lst'
const urlGoodsLst = '/guard/goods/lst'

export default {
  name: "AddOrderDialog",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    record: {
      type: Object,
      default: {}
    }
  },

  data() {
    return {
      form: {
        userIds: '',
        goodsId: '',
      },
      users:[],
      goods:[],
      selectUser:{id:0},
      selectGoods:{id:0,thumbs:[]},

      host: process.env.VUE_APP_HOST
    }
  },
  methods: {
    changeGoods(goodsId){
      this.goods.forEach(item=>{
        if(item.id==goodsId){
          this.selectGoods = item
        }
      })
    },

    handleAvatarSuccess(res, file) {
      if (res.status) {
        this.form.avatar = res.data.records.filePath
      } else {
        this.$message.error('上传失败!')
      }
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },

    onSubmit() {
      myPost(urlAdd, this.form).then(res => {
        if (res) {
          this.$message.success(res.msg)
          this.$emit('success', false)
        }
      })
    },
    cancel() {
      this.$emit('cancelDialog', false)
      Object.assign(this.$data.form, this.$options.data().form)
    },
    closeDialog() {
      this.cancel()
    },
    openDialog() {

      myGet(urlUserLst,{all:1}).then(res=>{
        res.data.records.forEach(user=>{
          this.users.push(user)
        })
      })

      myGet(urlGoodsLst,{all:1}).then(res=>{
        res.data.records.forEach(item=>{
          this.goods.push(item)
        })
      })
    },
  },

  computed: {
    isAdd: function () {
      return Object.keys(this.record).length <= 0;
    }
  },

}
</script>

<style scoped>
.el-select{
  width: 90%;
}
</style>
